<template>
  <div class="container">
    <h1 class="text-center">诗词</h1>
    <hr/>
    <vs-card-group>
      <vs-card v-for="card in poetryList" :key="card.id">
        <template #title>
          <h3>{{card.title}} {{card.author}}</h3>
        </template>
        <template #text>
          <p style="white-space: pre-wrap;align-content: center">
            {{card.content}}
          </p>
        </template>
      </vs-card>
    </vs-card-group>
  </div>
</template>

<script>
export default {
  name: 'poetry',
  data: () => {
    return {
      poetryList: [
        {
          id: 1,
          title: '无题',
          author: '李商隐',
          content: '相见时难别亦难，东风无力百花残\n春蚕到死丝方尽，蜡炬成灰泪始干\n晓镜但愁云鬓改，夜吟应觉月光寒\n蓬山此去无多路，青鸟殷勤为探看',
          urlPic: 1
        },
        {
          id: 2,
          title: '锦瑟',
          author: '李商隐',
          content: '锦瑟无端五十弦，一弦一柱思华年\n庄生晓梦迷蝴蝶，望帝春心托杜鹃\n沧海月明珠有泪，蓝田日暖玉生烟\n此情可待成追忆，只是当时已惘然',
          urlPic: 1
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>
